<template>
  <div class="columnLink">
    <div class="buttons">
      <el-button size="mini" type="primary" plain @click="linkEvent('name')">同名映射</el-button>
      <br />
      <el-button size="mini" type="primary" plain @click="linkEvent('index')">同行映射</el-button>
      <br />
      <el-button size="mini" plain @click="linkEvent('cancel')">取消映射</el-button>
    </div>
    <znxd-link-left-right v-model="currentLinkData" :initData="linkData" :nodeData="nodeData"></znxd-link-left-right>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nodeData: {
        // dataFrom: [
        //   {
        //     mode: "title",
        //     label: "源表字段"
        //   },
        //   {
        //     mode: "header",
        //     columnName: "字段名称",
        //     columnType: "字段类型",
        //     columnLong: "字段长度"
        //   },
        //   {
        //     id: "from-a",
        //     columnName: "a",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-b",
        //     columnName: "b",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-c",
        //     columnName: "c",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-d",
        //     columnName: "d",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-e",
        //     columnName: "e",
        //     columnType: "int",
        //     columnLong: 10
        //   }
        // ],
        // dataTo: [
        //   {
        //     mode: "title",
        //     label: "目标表字段"
        //   },
        //   {
        //     mode: "header",
        //     columnName: "字段名称",
        //     columnType: "字段类型",
        //     columnLong: "字段长度"
        //   },
        //   {
        //     id: "to-1",
        //     columnName: "1",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   { id: "to-2", columnName: "2", columnType: "int", columnLong: 10 },
        //   { id: "to-3", columnName: "3", columnType: "int", columnLong: 10 },
        //   {
        //     id: "to-4",
        //     columnName: "4",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "to-5",
        //     columnName: "5",
        //     columnType: "int",
        //     columnLong: 10
        //   }
        // ]
        dataFrom: [],
        dataTo: []

      },
      // linkData: [
      //   // { from: "from-a", to: "to-1" },
      //   // { from: "from-b", to: "to-2" },
      //   // { from: "from-c", to: "to-3" }
      // ],
      currentLinkData: [],
      linkData: []
    };
  },
  watch: {
    currentLinkData: {
      deep: true,
      handler: function (val) {
        console.log("columnLink", val);
        this.$emit("input", val);
      }
    },
    selection: {
      deep: true,
      handler: function (val) {
        let nodeData = {
          dataFrom: [],
          dataTo: []
        };
        nodeData.dataFrom = [
          {
            mode: "title",
            label: "源表字段"
          },
          {
            mode: "header",
            columnName: "字段名称",
            columnType: "字段类型",
            columnLong: "字段长度"
          }
        ]

        if (val.dataSourceSelection) {
          val.dataSourceSelection.map(x => {
            let { columnName, columnType, columnLong } = x;
            let obj = {
              id: "from-" + columnName,
              columnName,
              columnType,
              columnLong
            }
            nodeData.dataFrom.push(obj);
          })
        }
        nodeData.dataTo = [
          {
            mode: "title",
            label: "目标表字段"
          },
          {
            mode: "header",
            columnName: "字段名称",
            columnType: "字段类型",
            columnLong: "字段长度"
          }
        ]
        if (val.dataTargetSelection) {
          val.dataTargetSelection.map(x => {
            let { columnName, columnType, columnLong } = x;
            let obj = {
              id: "to-" + columnName,
              columnName,
              columnType,
              columnLong
            }
            nodeData.dataTo.push(obj);
          })
        }
        this.nodeData = nodeData;
        // console.log("this.nodeData", this.nodeData);
      }
    },
    "initData.linkData"(val) {
      if (val) {
        this.linkData = [...val];
      }
    }
  },
  computed: {
    selection() {
      let obj = {};
      if (this.dataSource && this.dataTarget) {
        obj = {
          dataSourceSelection: this.dataSource.selection,
          dataTargetSelection: this.dataTarget.selection
        };
      }
      // console.log("selection", obj);
      return obj
    }
  },
  props: {
    initData: Object,
    dataTarget: Object,
    dataSource: Object
  },
  methods: {
    // linkEvent(type) {
    //   console.log("type", type);
    //   switch (type) {
    //     case "name": {
    //       let links = [];
    //       this.dataSource.selection.map((x, index) => {
    //         let arr = this.dataTarget.selection.filter(target => {
    //           return x.columnName === target.columnName;
    //         })
    //         if (arr.length > 0) {
    //           let link = { from: "from-" + x.columnName, to: "to-" + arr[0].columnName }
    //           links.push(link);
    //         }
    //       })
    //       this.linkData = links;
    //     }
    //       break;
    //     case "index": {
    //       let links = [];
    //       this.dataSource.selection.map((x, index) => {
    //         if (this.dataTarget.selection && this.dataTarget.selection.length > index) {
    //           let link = { from: "from-" + x.columnName, to: "to-" + this.dataTarget.selection[index].columnName }
    //           links.push(link);
    //         }
    //       })
    //       this.linkData = links;
    //     }
    //       break;
    //     case "cancel":
    //       this.linkData = [];
    //       break;
    //     default:
    //       break;
    //   }
    // },
    // 校验数据
    linkEvent(type) {
      // console.log("type", type);
      switch (type) {
        case "name": {
          let links = [];
          this.selection.dataSourceSelection.map((x, index) => {
            let arr = this.selection.dataTargetSelection.filter(target => {
              return x.columnName === target.columnName;
            })
            if (arr.length > 0) {
              let link = { from: "from-" + x.columnName, to: "to-" + arr[0].columnName }
              links.push(link);
            }
          })
          this.linkData = links;

          // console.log(this.linkData);
          if (this.linkData.length === 0) {
            this.$message({
              message: "没有同名字段",
              type: "warning"
            });
          }
        }
          break;
        case "index": {
          let links = [];
          this.selection.dataSourceSelection.map((x, index) => {
            if (this.selection.dataTargetSelection && this.selection.dataTargetSelection.length > index) {
              let link = { from: "from-" + x.columnName, to: "to-" + this.selection.dataTargetSelection[index].columnName }
              links.push(link);
            }
          })
          this.linkData = links;
        }
          break;
        case "cancel":
          this.linkData = [];
          break;
        default:
          break;
      }
    },
    validateForm() {
      let flag = true;
      if (!this.currentLinkData || this.currentLinkData.length === 0) {
        flag = false;
        this.$message({
          message: "字段关系不能为空",
          type: "error"
        });
        return flag;
      }
      if (this.selection.dataSourceSelection.length !== this.selection.dataTargetSelection.length) {
        this.$message({
          message: "源表字段与目标字段数量不一致",
          type: "error"
        });
        flag = false;
        return flag;
      }

      return flag;
    }
  },
  mounted() {

  }
};
</script>
<style lang="scss" scoped>
.columnLink {
  position: relative;
  height: calc(100vh - 350px);
  .buttons {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 20px;
    display: flex;
    // height: 140px;
    width: 80px;
    flex-direction: column;
    // justify-content: space-between;
    // border: 1px solid red;
  }
}
</style>
